<script setup>
import{ref} from 'vue';
import axios from 'axios';
import { showMsg } from '@/components/Util';
import { computed } from 'vue';
let props = defineProps(['student','type','title'])
let emits = defineEmits(['submit','close'])
let obj = computed(()=>{
    return props.student;
})
function sub(){
    console.log(1);
    axios.post('/api/student_add',obj.value,{
        headers:{
            "Content-Type":"application/json"
        }
    }).then(res=>{
        console.log(2)
        if(res.data.status==200){
            emits('submit')
        }else{
            showMsg(res.data.msg,'warn',2000)
        }
    })
}
function edit(){
    axios.put('/api/student_update',obj.value,{
        headers:{
            "Content-Type":"application/json"
        }
    }).then(res=>{
        if(res.data.status==200){
            emits('submit')
        }else{
            showMsg(res.data.msg,'warn',2000)
        }
    })
}
// let addshow = ref(true)
</script>
<template >
<div class="box">
    <div class="title">
        <span class="aa">{{ title }}</span>
        <img src="../../assets/img/xx.png" class="dd" alt="" @click="emits('submit')">
    </div>
    <input type="text" placeholder="学生姓名" v-model="obj.name" class="bb">
    <input type="text" placeholder="学号" v-model="obj.xuehao" class="bb">
    <div class="sex">
        <label>
            <input type="radio" placeholder="上架" name="sex" v-model="obj.sex" />上架
        </label>
        <label>
            <input type="radio" placeholder="下架" name="sex" v-model="obj.sex" />下架
        </label>
    </div>
    <input type="text" placeholder="手机号" v-model="obj.mobile" class="bb">
    <input type="text" placeholder="家庭住址" v-model="obj.addr" class="bb">
    <input v-if="type=='new'" type="button" value="提交" @click="sub" class="cc">
    <input v-if="type=='edit'" type="button" value="提交修改" @click="edit" class="cc">
</div>
</template>
<style scoped>
.box{
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  background-color: white;
  position: absolute;
  margin: 10% 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.title>.aa{
    font-size: 20px;
    color: #0aa;
    font-weight: bold;
    float: left;
}
.box>.title{
    width: 270px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.sex{
    width: 280px;
    font-weight: bold;
    font-size: 20px;
}
.title>img{
    width: 25px;
    height: 25px;
}
.box>.bb{
    background-color: #eee;
    width: 270px;
    height: 30px;
}
.box>.cc{
    background-color: #0aa;
    width: 280px;
    height: 35px;
    color: white;
}
</style>